import React,{Component} from 'react'

import { ButtonStyled }  from './StyledButton'

class UIButton extends Component {

  render(){ 
    
    return ( 
    
      <ButtonStyled {...this.props}>
        <div className="btnMain" // 先调用组件内部点击方法
        // onClick={() => this.onHandleBtn(this.props)}
        // onClick={this.onHandleBtn}

        // 直接调用外部传入方法
        onClick={()=>(this.props.clickButton?this.props.clickButton(this.props.tag?this.props.tag:''):console.log('click'))}
        >
          {/* {()=>{if(this.props.img || this.props.selectedImg){
            
            return <>

            </>
            <img className="btnImg" src={this.props.selected?(this.props.selectedImg?this.props.selectedImg:this.props.img):this.props.img} alt=""/>

          }else{
            return 
          }
          selected
          }} */}
          
            <>
            {
              (this.props.img || this.props.selectedImg)? <img className="btnImg" src={this.props.selected?(this.props.selectedImg?this.props.selectedImg:this.props.img):this.props.img} alt=""/>:''

            }
            </>
          
          <>{

            (this.props.title||this.props.selectedTitle)?<p className="btnTitle">{this.props.selected?(this.props.selectedTitle?this.props.selectedTitle:this.props.title):this.props.title}</p>:''      
          }</>
          
          {this.props.children}
        </div>
      </ButtonStyled>
      
    )
  }
  onHandleBtn = (props) => {
    console.log(26,props)
    // 可进行组件内部处理按钮状态

    // 调用传入点击事件
    if(this.props.clickButton){
      this.props.clickButton(props.tag?props.tag:'')

    }else{
      console.log("click11")
    }
    // this.props.history.push('/list', { id })
    // this.props.selected = !this.props.selected;
  }
  
}
 
export default UIButton